<template>
  <div class="index">
    <div>
      <div class="flexc yy">
        <div>
          <img :src="person.avatar" style="width: 1rem; height: 1rem; border-radius: 0.5rem;">
        </div>
        <div style="margin-left: 0.3rem; font-size: 0.3rem; font-weight: bold;">
          {{person.name}}
        </div>
        <div
          style="margin-left: 0.3rem; background: #EAEAEE; line-height: 0.6rem; padding: 0 0.2rem; border-radius: 0.3rem;">
          {{person.title}}
        </div>
      </div>
      <div style="margin-bottom: 0.3rem;text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);">常用功能</div>
      <div class=" yy">
        <div class="flex">
          <div style="width: 25%;" @click="go('/kehu?gonghai=true')">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/1.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">公海客户</div>
          </div>
          <div style="width: 25%;" @click="go('/kehu')">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/2.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">客户列表</div>
          </div>
          <div style="width: 25%;" @click="go('/kehu/xinjiankehu')">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/3.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">新建客户</div>
          </div>
          <div style="width: 25%;" @click="go('/baifang/list')">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/4.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">拜访记录</div>
          </div>
        </div>
        <div class="flex" style="margin-top: 0.3rem;">
          <div style="width: 25%;"  @click="go('/baifang/xinjiankehu')">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/3.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">新建拜访</div>
          </div>
          <!-- v-if="person.title == '销售内勤'" -->
          <div style="width: 25%;" @click="go('/shenpi?kh=true')" v-if="person.title == '销售内勤'">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/kehushenpi.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">客户审批</div>
          </div>
          <div style="width: 25%;" @click="go('/lianxiren')">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/lianxiren.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">联系人列表</div>
          </div>
          <div style="width: 25%;" @click="go('/shenpi?bf=true')" v-if="person.title == '销售内勤'">
            <div class="flexcc" style="margin-bottom: 0.1rem;"><img src="../../../static/img/baifangshenpi.png"
                style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div class="flexcc">拜访审批</div>
          </div>
        </div>
      </div>
      <div style="text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);">数据统计</div>
      <div class="flex" style="justify-content: flex-end; margin-bottom: 0.2rem;">
        <div @click="changeact('本周')" :class="act == '本周'?'act':'act1'">本周</div>
        <div @click="changeact('本月')" :class="act == '本月'?'act':'act1'">本月</div>
        <div @click="changeact('本年度')" :class="act == '本年度'?'act':'act1'">本年度</div>
      </div>
      <div class=" yy">
        <div class="flexbc" style="margin-bottom: 0.2rem;">
          <div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem;" class="flexc">
            <div><img src="../../../static/img/1.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div style="margin-left: 0.2rem;">
              <div style="margin-bottom: 0.1rem;font-size: 0.25rem;">新增客户数</div>
              <div style="font-weight: bold; color: #999; font-size: 0.22rem;">{{shujuall.xzkhs}}个</div>
            </div>
          </div>
          <div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem; margin-left: 0.2rem;"
            class="flexc">
            <div><img src="../../../static/img/2.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div style="margin-left: 0.2rem;">
              <div style="margin-bottom: 0.1rem;font-size: 0.25rem;">新增拜访数</div>
              <div style="font-weight: bold; color: #999; font-size: 0.22rem;">{{shujuall.xzbfs}}个</div>
            </div>
          </div>
        </div>
        <div class="flexbc" style="margin-bottom: 0.2rem;">
          <div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem;" class="flexc">
            <div><img src="../../../static/img/3.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div style="margin-left: 0.2rem;">
              <div style="margin-bottom: 0.1rem;font-size: 0.25rem;">新增公海客户</div>
              <div style="font-weight: bold; color: #999; font-size: 0.22rem;">{{shujuall.xzghkhs}}个</div>
            </div>
          </div>
          <div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem; margin-left: 0.2rem;"
            class="flexc">
            <div><img src="../../../static/img/4.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div style="margin-left: 0.2rem;">
              <div style="margin-bottom: 0.1rem;font-size: 0.25rem;">新增联系人</div>
              <div style="font-weight: bold; color: #999; font-size: 0.22rem;">{{shujuall.xzlxrs}}个</div>
            </div>
          </div>
        </div>
        <div class="flexbc" style="margin-bottom: 0.2rem;">
          <div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem;" class="flexc">
            <div><img src="../../../static/img/5.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div style="margin-left: 0.2rem;">
              <div style="margin-bottom: 0.1rem;font-size: 0.25rem;">客户审批数</div>
              <div style="font-weight: bold; color: #999; font-size: 0.22rem;">{{shujuall.xzkhsps}}个</div>
            </div>
          </div>
          <div style="flex: 1; padding: 0.2rem; border: 1px #EAEAEA solid; border-radius: 0.1rem; margin-left: 0.2rem;"
            class="flexc">
            <div><img src="../../../static/img/7.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
            <div style="margin-left: 0.2rem;">
              <div style="margin-bottom: 0.1rem;font-size: 0.25rem;">拜访审批数</div>
              <div style="font-weight: bold; color: #999; font-size: 0.22rem;">{{shujuall.xzbfsps}}个</div>
            </div>
          </div>
        </div>
      </div>
      {{person}}

   <!--   <div @click="qie(1)" style="margin-bottom: 0.2rem;">测试切换内勤角色</div>

      <div @click="qie(2)">测试切换林角色</div> -->
    </div>

    <dibu></dibu>

  </div>
</template>

<script>
  import dibu from '../zujian/dibu.vue'
  import * as dd from 'dingtalk-jsapi';
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
    components:{
      dibu
    },
		data() {
			return {
         act:'本周',
         person:"",
         search:{
           fzrid:this.$store.state.userid,
           sjbj:""
         },
         shujuall:"",
         cuowu2:""
			}
		},
		created() {
      // this.$store.commit('changeuserid','063523235026761126')
      // // this.$store.commit('changeuserid','15299789875201701')
      // console.log(localStorage.getItem('person'))
      // if(!localStorage.getItem('person')){
      //   this.person = {
      //     avatar: "https://static-legacy.dingtalk.com/media/lQDPDhvWJJzMncjNAdPNAdOwDtoK89KpAuMDL4ZuTQByAA_467_467.jpg",
      //     boss: false,
      //     job_number: null,
      //     manager_userid: null,
      //     mobile: "15553523723",
      //     name: "林鹏举",
      //     remark: null,
      //     title: null,
      //     unionid: "afKiSpGaXnapU1dDqAeRKowiEiE",
      //     userid: "063523235026761126"
      //   }
      //   localStorage.setItem('person',JSON.stringify(this.person))
      //   this.getlist()
      // }else{
      //   this.person = JSON.parse(localStorage.getItem('person'))
      //   this.getlist()
      // }




      //获取个人信息
      axios.get('/Common/getCorpld').then((response2)=>{
      	if (response2.data.state == 200) {


          dd.getAuthCode({
            corpId: response2.data.data,
            success: (res) => {
              axios.get('/Common/getuserinfo?code='+res.code).then((response)=>{
              	if (response.data.state == 200) {
                  this.person = response.data.data
                  localStorage.setItem('person',JSON.stringify(this.person))

                  this.$store.commit('userid',this.person.userid)

                  this.getlist()
              	} else {
              		vant.Toast(response.data.msg);
              	}
              })
            }
          });
      	} else {
      		vant.Toast(response2.data.msg);
      	}
      })

		},
		mounted() {
      if(location.pathname.includes('index')){
        this.act = '本周'
      }
		},
		methods: {
      qie(val){
        if(val == 1){
            this.$store.commit('changeuserid','15299789875201701')
            this.person = {
              avatar: "https://static-legacy.dingtalk.com/media/lQDPDhvWJJzMncjNAdPNAdOwDtoK89KpAuMDL4ZuTQByAA_467_467.jpg",
              boss: false,
              job_number: null,
              manager_userid: null,
              mobile: "15553523723",
              name: "林鹏举",
              remark: null,
              title: '销售内勤',
              unionid: "afKiSpGaXnapU1dDqAeRKowiEiE",
              userid: "063523235026761126"
            }
            localStorage.setItem('person',JSON.stringify(this.person))
          }else{
            this.$store.commit('changeuserid','063523235026761126')
            this.person = {
              avatar: "https://static-legacy.dingtalk.com/media/lQDPDhvWJJzMncjNAdPNAdOwDtoK89KpAuMDL4ZuTQByAA_467_467.jpg",
              boss: false,
              job_number: null,
              manager_userid: null,
              mobile: "15553523723",
              name: "林鹏举",
              remark: null,
              title: null,
              unionid: "afKiSpGaXnapU1dDqAeRKowiEiE",
              userid: "063523235026761126"
            }
            localStorage.setItem('person',JSON.stringify(this.person))
        }
      },
      changeact:function(val){
        this.act = val
        this.search.sjbj = val
        this.getlist()
      },
      getlist:function(){
        axios.get('/Common/queryAddEventCount',{params:this.search}).then((response)=>{
          if (response.data.state == 200) {
            this.shujuall = response.data.data
          } else {
            vant.Toast(response.data.msg);
          }
        })
      }
		}
	}
</script>





<style scoped lang="less">
  .index {
    background: #fff;
    min-height: 100vh;
    width: 100vw;
    padding: 0.3rem;
    font-size: 0.25rem;

    img {
      max-width: 100%;
      display: block;
    }

    .flex {
      display: flex;
    }

    .flexc {
      display: flex;
      align-items: center;
    }

    .flexbc {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }
  }
</style>
